<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from '@/components/HelloWorld.vue';
import { ref } from 'vue'
const value1 = ref("")
</script>
<script lang="ts">
export default {
  name: 'Home'
}
</script>
<template>
  <div class="home">
    <img alt="Vue logo" src="@/assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
    <p class="demo">测试</p>
    <el-date-picker v-model="value1" type="date" placeholder="Pick a day"></el-date-picker>
    <div class="icon-list">
      <span class="item-icon"><edit></edit></span>
      <span class="item-icon">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lock"></use>
        </svg>
      </span>
      <span class="item-icon">
        <svg-icon icon-class="edit"></svg-icon>
      </span>
      <span class="item-icon">
        <svg-icon icon-class="icon-lock"></svg-icon>
      </span>
    </div>
  </div>
</template>

<style lang="scss">
.home {
  text-align: center;
  color: $primary;
  margin-top: 60px;
}
.icon-list{
  width: 100%;
  text-align: center;
  .item-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 5px;
    font-size: 16px;
    color: $pink;
    svg{
      width:100%;
      height: 100%;
      fill: currentColor;
    }
  }
}
</style>